<div id="searchForm">    
    <img src="<?php echo $this->baseUrl() ?>/images/logo-big.jpg" alt="GalDic" align="top" />
    
    <form name="galdicForm" id="galdicForm" action="<?php echo $this->baseUrl() ?>/index/search/"
        onsubmit="return false;">
        
        <input dojoType="dijit.form.TextBox" value="<?php echo $this->q ?>" placeholder="Escriba un termo aquí..."
               searchAttr="name" name="q" id="q" />
    
        <button dojoType="dijit.form.Button" id="btnSearch">Busca</button>
    </form>
</div>

<div dojoType="dojox.widget.Toaster" id="searchingToaster" duration="0"
     messageTopic="/searching" positionDirection="tr-left" style="display:hide;"></div>

<div dojoType="dijit.layout.ContentPane" id="resultContainer">
    <?php echo $this->outputResults ?>
</div>

<script type="text/javascript">
dojo.require('vifito.galdic.widgets.GalipediaBox');

var changeButton = function(label, disabled) {
    dijit.byId('btnSearch').setLabel(label);
    dijit.byId('btnSearch').setDisabled(disabled);
    
    if(!disabled) {
        dijit.byId('q').focus();
    }
};

var onSubmitQ = function(evt) {
    
    if(dijit.byId('q').getValue() && (dijit.byId('q').getValue().length>0)) {
        
        // Limpando contedor de resultados
        dijit.byId('resultContainer').attr("content", '');
        
        changeButton("Buscando ...", true);
        
        var toaster = dijit.byId('searchingToaster');
        toaster.setContent("Busca en proceso...", 'message', 4000);
        toaster.show();
        
        var xhrArgs = {
            url: '<?php echo $this->baseUrl() ?>/index/search/',
            form: dojo.byId('galdicForm'),
            handleAs: 'text',
            load: function(data) {
                changeButton("Buscar", false);
                dijit.byId('resultContainer').attr("content", data);
                
                setTimeout(function() {
                    dijit.byId('searchingToaster').hide();
                }, 1000);                    
            },
            error: function() {
                changeButton("Buscar", false);
                dijit.byId('resultContainer').attr("content", 'Erro na comunicación');                
                
                var toaster = dijit.byId('searchingToaster');
                toaster.setContent("Erro na procura do termo.", 'fatal', 2000);
                toaster.show();
            }
        };
        
        var deferred = dojo.xhrPost(xhrArgs);
        
        // Search in galipedia
        dijit.byId('galipediaBox').clear(); // limpar contedor
        var wsg = new vifito.galdic.WSGalipedia();
        wsg.opensearch( dijit.byId('q').getValue() );
    }
    
};

dojo.addOnLoad(function() {
    dojo.connect(dijit.byId('btnSearch'), 'onClick', onSubmitQ);
    
    dojo.connect(dijit.byId('q'), 'onKeyPress', function(event) {        
        if (event.keyCode === dojo.keys.ENTER) {
            onSubmitQ();
        }
    });
    
    dijit.byId('q').setValue("");
    dijit.byId('q').focus();
});
</script>

<div dojoType="vifito.galdic.widgets.GalipediaBox" id="galipediaBox" class="galipedia-box"></div>